<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {color: #fff;font-weight: bold;}
		#div1 {width: 200px;height: 300px;line-height:300px;text-align:center;background-color:blue; position: absolute; left: -200px;top: 120px;}
		#div2 {width: 30px;height: 100px; text-align:center; line-height: 30px; background-color:red; position: absolute; left: 200px;top: 100px}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');

		oDiv.onmouseover = function (){		//由于冒泡机制，即使鼠标移到"分享到"这个子级上，子级接收事件后无执行动作，然后传递给父级oDiv
			oDiv.style.left = 0;
		}

		oDiv.onmouseout = function (){		//从而使代码量得到简化
			oDiv.style.left = '-200px';
		}
	}
	</script>
</head>
<body>
	<div id="div1">
		分享的内容
		<div id="div2">分享到</div>
	</div>
</body>
</html>